<template>
	<view>
		
		<!-- 账号密码输入框 -->
		<view class="form">
			<view class="username">
				<u--input :clearable="true" border="none"  @blur="userNameblur" placeholder="手机号/用户名" v-model="username"
					placeholder-style="color: #d7d7d9;" />
			</view>
			<view class="password">
				<!-- <m-input type="password" displayable v-model="password" placeholder="密码"></m-input> -->
				<u--input :clearable="true" border="none" class="uni-input" v-model="password" placeholder="密码" :password="showPassword"
					placeholder-style="color: #d7d7d9;" />
				<view @click="changePassword">
					<uni-icons type="eye-filled" size="22" :color="!showPassword ?'#007aff':'#8f8f94'"></uni-icons>
				</view>
			</view>
			<view class="password" :style="this.needvcode==1?'':'display:none;'">
				<u--input :clearable="true" border="none"  placeholder="验证码" type="number" placeholder-style="color: #d7d7d9;" maxlength="6"
					v-model="vcodeNumber" />
				<button :class="{active : !disableCodeBtn}" :disabled="disableCodeBtn"
					@tap="sendCode">{{codeBtn.text}}</button>
			</view>
			
			<!-- <view class="huo-box">或</view> -->
			<!-- <view class="btn btn2" @tap="backToPage">验证码登录</view> -->

			<!-- <view class="res"> -->
				<!-- <view @tap="backToPage" style="color: #ff4a32; text-decoration: underline;"></view> -->
				<view class="res" @tap="toPage('resetpasswd')" style="font-size: 26rpx;">
					<image src="../../../static/img/wenhao.png"
						style="width: 35rpx; height: 36rpx; vertical-align: middle;"></image> 忘记密码?
				</view>
			<!-- </view> -->
			<view class="btn" @tap="doLoginTo">立即登录</view>
		</view>
		
		<!-- 登陆密码不对提示 -->
		<view class="mima-error" style="display: none;">
			<view class="error-close">
				<image src="../../../static/img/close.png"></image>
			</view>
			<view class="error-title">用户对应密码不正确！</view>
			<view class="error-tip">请输入采招网账号（手机号）及对应密码</view>
			<view class="error-btn">
				<button class="zhmm" @tap="toPage('resetpasswd')">找回密码</button>
				<button class="chongshi" @tap="toPage('login2')">重试</button>
			</view>
		</view>
	</view>
</template>

<script>
	import App from '@/App.vue'
	import {
		createSSRApp
	} from 'vue'
	export default {
		components: {
		},
		props:['tongyi','fromurl','tiaozhuantype','name'],
		data() {
			return {
				// type: '',
				username: this.name?this.name:'',
				password: '',
				needvcode: 0,
				seconds: 60,
				codeBtn: {
					text: '获取验证码',
					waitingCode: false,
					count: this.seconds,
					vtoken: ''
				},
				vcodeNumber: '',
				// tongyi: false,
				showPassword: true
			}
		},
		computed: {
			disableCodeBtn: function() {
				return this.codeBtn.waitingCode;
			}
		},
		methods: {
			// back() {
			// 	console.log('back()');
			// 	uni.navigateTo({
			// 		url: '/pages/index/index'
			// 	});
			// },
			toPage(page) {
				uni.hideKeyboard({})
				uni.navigateTo({
					url: page
				});
			},
			changePassword: function() {
				this.showPassword = !this.showPassword;
				console.log(this.showPassword)
			},
			gotourl(type, url) {
				//type: tab  nav
				// if (type == 'tab') {
				// 	uni.switchTab({
				// 		url: url
				// 	})
				// } else if (type == 'nav') {
				// 	uni.navigateTo({
				// 		url: url
				// 	})
				// }
				uni.reLaunch({
					url: url
				})
			},
			backToPage() {
				console.log("前-" + new Date())
				uni.hideKeyboard()
				uni.navigateBack();
				console.log("后-" + new Date())
			},
			doLoginTo() {
				uni.hideKeyboard();

				if (!this.tongyi) {
					uni.showToast({
						title: '请勾选同意采招网服务条款及隐私政策！',
						icon: "none"
					});
					return false;
				}

				//验证用户名是否为手机号码
				if (!(/^1\d{10}$/.test(this.username))) {
					this.needvcode == 0;
				}
				if (this.username == "") {
					uni.showToast({
						title: '请输入用户名',
						icon: "none"
					});
				} else if (this.password == "") {
					uni.showToast({
						title: '请输入密码',
						icon: "none"
					});
				} else if (this.needvcode == 1 && !(/^\d{6}$/.test(this.vcodeNumber))) {
					uni.showToast({
						title: '输入验证码格式有误',
						icon: "none"
					});
				} else {
					uni.showLoading({
						title: '提交中...'
					})
					//访问接口获取验证码
					let data = this.initNewData();
					//位置类别
					data.type = 1;
					data.location = 5117;
					data.username = this.username;
					data.password = this.password;
					data.needvcode = this.needvcode;
					data.vcode2 = this.vcodeNumber;
					uni.request({
						url: this.baseConfig.serverURL + 'User/login/LoginHandler.ashx', //检查更新的服务器地址
						data: data,
						method: "POST",
						header: {
							"content-type": "application/x-www-form-urlencoded" //"application/json"
						},
						success: (res) => {
							// debugger
							//uni.hideToast();
							uni.hideLoading();
							if (res.statusCode == 200) {
								if (!res.data.ret) {
									if (res.data.retbs == 3) {
										this.needvcode = 1;
										this.getSendCodeVToken();
									} else {
										uni.showToast({
											title: res.data.msg,
											icon: "none"
										});
									}
								} else {
									this.currUser = res.data.other2;
									
									// try{
									// 	const app = createSSRApp(App)
									// 	app.config.globalProperties.currUser = res.data.other2
									// }catch(err){
									// 	console.log('login-catch,',err)
									// }
									
									uni.setStorageSync("curruser", this.currUser)
									// 更新登录状态
									this.checkLogin();
									if (this.fromurl != '' && this.tiaozhuantype != '') {
										if (this.fromurl.indexOf('common-webview') > 0) {
											uni.navigateBack({
												delta: 1
											});
										} else {
											this.gotourl(this.tiaozhuantype, this.fromurl);
										}
									} else {
										// console.log("navigateBack")
										uni.navigateBack({
											delta: 1
										});
									}
									//存储记录 下次登录不用再次勾选服务条款
									uni.setStorage({
										key: 'AgreeService',
										data: true
									});
								}
							} else {
								uni.showToast({
									title: '登录失败！',
									icon: "none"
								});
							}
						},
						fail: (res) => {
							uni.showToast({
								title: '登录失败,可能网络超时！',
								icon: "none"
							});
							uni.hideLoading();
						}
					})

				}
				return false;
			},
			// togglePopup(type, open) {
			// 	this.type = type
			// 	this.$nextTick(() => {
			// 		this.$refs['show' + open].open()
			// 	})
			// },
			// fuwutiaokuan() {
			// 	uni.navigateTo({
			// 		url: "/pages/index/webview/common-webview?weburl=https://www.bidcenter.com.cn/help/fwtk.shtml"
			// 	})
			// },
			// yinsizhengce(){
			// 	uni.navigateTo({
			// 		url: "/pages/index/webview/common-webview?weburl=https://www.bidcenter.com.cn/help/yszc.shtml"
			// 	})
			// },
			cancel(type) {
				this.$refs['show' + type].close()
			},
			change(e) {
				//console.log('是否打开:' + e.show)
			},
			userNameblur(value) {
				// console.log(e.detail.value)
				// this.username = e.detail.value;
				this.$emit('update:name', value)
			},
			sendCode() {
				//等待验证码
				if (this.codeBtn.waitingCode)
					return false;
				//如果初始验证密钥为空，重新获取
				if (this.username != "" && this.codeBtn.vtoken == "") {
					this.getSendCodeVToken();
				}
				//验证手机号码
				if (!(/^1\d{10}$/.test(this.username))) {
					uni.showToast({
						title: '请填写正确手机号码',
						icon: "none"
					});
					return false;
				} else if (this.codeBtn.vtoken == "") {
					uni.showToast({
						title: '当前页面已失效，请重新打开本页面！',
						icon: "none"
					});
					return false;
				}
				this.codeBtn.waitingCode = true;
				this.codeBtn.count = this.seconds;
				this.codeBtn.text = this.codeBtn.count + '秒后重发';

				let countdown = setInterval(() => {
					this.codeBtn.count--;
					this.codeBtn.text = this.codeBtn.count + '秒后重发';
					if (this.codeBtn.count < 0) {
						clearInterval(countdown);
						this.codeBtn.text = '重新发送';
						this.codeBtn.waitingCode = false;
					}
				}, 1000);
				//访问接口获取验证码
				let data = this.initNewData();
				//位置类别
				data.location = 5117;
				data.vtoken = this.codeBtn.vtoken;
				data.mobile = this.username;
				uni.request({
					url: this.baseConfig.serverURL + 'sms/GetVCodeHandler.ashx', //检查更新的服务器地址
					data: data,
					method: "POST",
					header: {
						"content-type": "application/x-www-form-urlencoded" //"application/json"
					},
					success: (res) => {
						if (res.statusCode == 200) {
							if (!res.data.ret) {
								uni.showToast({
									title: res.data.msg,
									icon: "none"
								});
							}
						} else {
							uni.showToast({
								title: '获取验证码失败！',
								icon: "none"
							});
						}
					},
					fail: (res) => {
						uni.showToast({
							title: '获取验证码失败，可能已超时！',
							icon: "none"
						});
					}
				})
			},
			/***发送验证码验证串**/
			getSendCodeVToken() {
				let data = this.initNewData();
				//位置类别
				data.location = 5117;
				uni.request({
					url: this.baseConfig.serverURL + 'sms/GetVCodeTokenHandler.ashx', //检查更新的服务器地址
					data: data,
					method: "POST",
					header: {
						"content-type": "application/x-www-form-urlencoded" //"application/json"
					},
					success: (res) => {
						if (res.statusCode == 200) {
							if (res.data.ret) {
								//更新vtoken 
								this.codeBtn.vtoken = res.data.other;
							} else {
								if (jmsg.retbs = 12586) {
									uni.showToast({
										title: jmsg.msg || '您的操作过于频繁，请稍候再试！',
										icon: "none"
									});
								} else {
									setTimeout(this.getSendCodeVToken(), 1000)
								}
							}
						} else {
							// setTimeout(this.getSendCodeVToken(), 1000)
						}
					},
					fail: (res) => {
						// setTimeout(this.getSendCodeVToken(), 1000)
					}
				})
			},
			// fuwutiaokuan() {
			// 	uni.navigateTo({
			// 		url: "/pages/index/webview/common-webview?weburl=https://www.bidcenter.com.cn/help/fwtk.shtml"
			// 	})
			// },
			// tongyixieyi() {
				
			// 	this.tongyi = !this.tongyi;
			// 	//console.log(this.tongyi);
			// }

		},
		// onBackPress() {
		// 	//this.$refs['showpopup'].close()
		// }
	}
</script>

<style lang="scss">
	@import "../../../static/css/login.scss";

	.form {
		// .res {
		// 	display: flex;
		// 	justify-content: space-between;
		// 	align-items: center;
		// 	// height: 100upx;
		// 	color: #d7d7d9;
		// }

		.res-btn {
			color: #375fe1;
			text-decoration: underline;
		}

		// .btn {
		// 	font-size: 32rpx;
		// }

		.huo-box {
			text-align: center;
			color: #C0C0C0;
			margin: 20rpx 0;
			font-size: 30rpx;
		}

		.btn2 {
			background-color: #fff;
			border: 1px solid #375fe1;
			color: #375fe1;
			box-sizing: border-box;
		}
	}

	.oauth {
		// @media all and (max-height: 150vw) {
		// 	display: none;
		// }

		position: absolute;
		bottom: 50rpx;
		width: 100%;

		.text {
			width: 100%;
			height: 60upx;
			display: flex;
			justify-content: center;
			align-items: center;
			color: #cccbcb;
			font-size: 28upx;
		}

		.list {
			width: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 20upx 0;

			.icon {
				font-size: 80upx;
				margin: 0 30upx;
			}
		}
	}

	.weixin {
		image {
			width: 86rpx;
			height: 90rpx;
		}
	}

	.text-tips {
		margin-top: 30rpx;
		text-align: center;
		font-size: 28rpx;
		color: #cccbcb;
		line-height: 40rpx;
	}

	.fuwutiaokuan {
		width: 90%;
		background-color: #fff;
		border-radius: 20rpx;
		position: relative;
		margin-left: 5%;
		padding-top: 30rpx;
		overflow: hidden;

		.fwtk-title {
			text-align: center;
			font-size: 35rpx;
		}

		.fwtk-content {
			padding: 0 30rpx 30rpx;

			// height: 200rpx;
			// overflow-x: hidden;
			// overflow-y: scroll;
			//  -webkit-overflow-scrolling: touch;
			.fwtk-Ftitle {
				padding-top: 30rpx;
				font-size: 30rpx;
			}

			.fwtk-text {
				font-size: 26rpx;
				color: #666666;
				line-height: 32rpx;
				padding-top: 20rpx;
			}
		}

		.fwtk-btn {
			color: #fff;
			background-color: #2F69E0;
			border-radius: 0;
			font-size: 34rpx;
		}
	}

	.mima-error {
		width: 90%;
		background-color: #fff;
		border-radius: 20rpx;
		position: relative;
		margin-left: 5%;
		padding-top: 30rpx;
		overflow: hidden;

		.error-close {
			position: absolute;
			right: 20rpx;
			top: 20rpx;

			image {
				width: 50rpx;
				height: 49rpx;
			}
		}

		.error-title {
			text-align: center;
			font-size: 35rpx;
			color: #FF4B32;
			padding-top: 35rpx;
		}

		.error-tip {
			font-size: 28rpx;
			color: #666666;
			text-align: center;
			padding: 30rpx 0;
		}

		.error-btn {
			display: flex;
			flex-direction: row;

			.zhmm {
				width: 40%;
				text-align: center;
				font-size: 32rpx;
				color: #fff;
				background-color: #ff4b32;
				border-radius: 5px;
				border: 0;
			}

			.chongshi {
				width: 40%;
				text-align: center;
				font-size: 32rpx;
				background-color: #fff;
				border-radius: 5px;
				color: #666;
			}
		}
	}

	.password {

		button {
			font-size: 28rpx;
			color: #ff4a32 !important;
			// border: 1px solid #ff4a32;
			border-radius: 3px;
			padding: 14rpx 0px;
			width: 40%;
			text-align: center;
			line-height: 36rpx;
			background-color: #FFFFFF !important;

			&:after {
				border: none
			}

			&.active {
				background-color: #ff4a32;
				color: #fff;
			}
		}
	}
</style>
